<template>
	<view class="content">
		<image mode="widthFix" class="wenyiwen" src="/static/wenyiwen.png"></image>
		<view class="bgss" @click.stop="editimg"
			:style="{ 'background-image': `url(${form.bgImage || 'https://uimg.huixiaoer.net/86196272/b6d8196a274964bbdfb8aaddeafdfdac.jpg'})` }">
			<!-- <view class="topimgs overs"> -->
			<image class="imgs imglieft" src="/static/lefts.png" @click.stop="back"></image>
			<view class="rights">
				<view class="topimgs">
					<image class="imgs" src="/static/fenxiang.png"></image>
				</view>
				<view class="topimgs">
					<image class="imgs" src="/static/shoucang.png"></image>
				</view>
				<view class="topimgs">
					<image class="imgs" src="/static/more.png" @click.stop="handleLongPress"></image>
				</view>
			</view>
			<!-- </view> -->
		</view>

		<view class="neirong ">
			<image class="neiimg" mode="widthFix" src="/static/beijing2.png"></image>
			<view class="xinxi">
				<view class="names">
					<text v-if="!isshow">{{ form.names }}</text>
					<input class="fonts input lanborder" v-if="isshow" v-model="form.names" />
				</view>
				<view class="xinxi2">
					<view class="kaye">
						<text v-show="!isshow">{{ form.kaiye }}</text>
						<input style="width:150upx" class="kayeinput input lanborder" v-if="isshow" v-model="form.kaiye" />
					</view>
					<view class="mingci">
						<text v-show="!isshow">{{ form.renqi }}</text>
						<image mode="widthFix" class="jiant" src="/static/jiant.png"></image>
						<input class="kayeinput input lanborder" v-if="isshow" v-model="form.renqi" />
					</view>
					<image mode="widthFix" class="huanhuang" src="/static/huanhuang.png"></image>
				</view>

				<view class="dizhi" v-if="!isshow">{{ form.adress }} </view>
				<view class="dizhi" v-if="isshow">
					<input class="input lanborder" v-if="isshow" v-model="form.adress" />
				</view>
				<view class="dizhi2" v-if="!isshow">{{ form.adress2 }} </view>
				<view class="dizhi2" v-if="isshow">
					<input class="input lanborder" v-if="isshow" v-model="form.adress2" />
				</view>

				<view class="riqi" v-if="!isshow">
					<view>
						<view><text style="font-weight: bold;">{{ form.start.time1 }}
							</text> 月<text style="font-weight: bold;">{{ form.start.time2 }}</text>日
						</view>
						<text class="tian">今天</text>
					</view>
					<image mode="widthFix" class="wan" src="/static/wan.png"></image>
					<view>
						<view><text style="font-weight: bold;">{{ form.end.time1 }}</text> 月<text
								style="font-weight: bold;">{{ form.end.time2 }}</text>日
						</view>
						<view><text class="tian">明天</text> </view>
					</view>
				</view>
				<view class="riqi" v-if="isshow">
					<view>
						<view><text style="font-weight: bold;">
								<input class="lanborder" v-model="form.start.time1"
									style="float:left;width:50upx;font-size:30upx" />
							</text>

							<view style="float:left">月</view>
							<text style="font-weight: bold;"><input class="lanborder" v-model="form.start.time2"
									style="float:left;width:50upx;font-size:30upx" /></text>日
						</view>
						<text class="tian"><input class="lanborder" v-model="form.startday"
								style="float:left;width:50upx;font-size:30upx" /></text>
					</view>
					<image mode="widthFix" class="wan" src="/static/wan.png"></image>
					<view>
						<view><text style="font-weight: bold;"><input class="lanborder" v-model="form.end.time1"
									style="float:left;width:50upx;font-size:30upx" /></text>
							<view style="float:left">月</view><text style="font-weight: bold;"><input class="lanborder"
									v-model="form.end.time2" style="float:left;width:50upx;font-size:30upx" /></text>日
						</view>
						<view><text class="tian"><input class="lanborder" v-model="form.endday"
									style="float:left;width:50upx;font-size:30upx" /></text> </view>
					</view>
				</view>
			</view>
		</view>
		<view class="uls">
			<!-- 查看模式下的列表 -->
			<view class="lists hasbianji" @click.stop="godetail(item)" v-if="!isshow" v-for="(item, index) in   form.list  "
				:key="index">
				<view class="goodsbb">
					<view class="goods"
						:style="{ backgroundImage: `url(${item.image || 'https://uimg.huixiaoer.net/86196272/b6d8196a274964bbdfb8aaddeafdfdac.jpg'})` }">
					</view>
				</view>

				<view class="rightword">
					<view class="goodtitle ">{{ item.name }}
					</view>
					<view class="styles" style="font-size: 20upx;margin-top: 3upx;">
						<text>1张1.8米大床</text>|<text>20-25cm</text>|<text>2人入住</text>
					</view>
					<view class="styles" style="font-size: 20upx;"><text>无早餐</text>|<text
							style="color:#3165ac">入住当天18:00前可免费取消</text></view>
					<view class="smarts">
						<view class="yuan">礼</view>
						<view class="xiaoword">一次性洗漱用品/刮胡刀/矿泉水两瓶</view>
					</view>
					<view style="overflow: hidden;">
						<view class="xiangm">
							<view>本店销量N0.1</view>
							<view>
								<image mode="widthFix" class="ruzhu" src="/static/ruzhu.png"></image>
								住就送·73元券包
							</view>
							<view>确认较快</view>
						</view>
					</view>

					<view class="jiage">
						<image class="jiageimg" mode="widthFix" src="/static/jiage.png"></image>
						<view class="jiageneirong">
							<view class="transfomtrs">￥{{ item.yuanprice }}</view>
							<view class="transfomtrs">￥</view>
							<view>{{ item.price }}</view>
						</view>
					</view>
					<view class="boxs">
					</view>
				</view>
			</view>

			<!-- 编辑模式下的列表 -->
			<view class="lists isbianji" v-if="isshow" v-for="(  item, index  ) in    form.list   " :key="index">
				<view class="shanchu" @click.stop="removeHotel(index)">删除该酒店</view>
				<view class="goodsbb">
					<view class="goods"
						:style="{ backgroundImage: `url(${item.image || 'https://uimg.huixiaoer.net/86196272/b6d8196a274964bbdfb8aaddeafdfdac.jpg'})` }">
					</view>
					<view class="goods addtu" @click.stop="() => addtu(index)">
						点击添加酒店图片
					</view>
				</view>

				<view class="rightword">
					<view class="goodtitles"><input class="lanborder" v-model="item.name"
							style="font-size: 30upx;width:190upx" /> [
						<image mode="widthFix" class="xing" src="/static/xing.png">
						</image>
						<input class="lanborder" v-model="item.tiaojian1" style="font-size: 20upx;width: 100upx;" />
						<image mode="widthFix" class="xing" src="/static/xing.png"></image>

						<input class="lanborder" v-model="item.tiaojian2" style="font-size: 20upx;width: 100upx;" />
						<image mode="widthFix" class="xing" src="/static/xing.png"></image> <input class="lanborder"
							v-model="item.tiaojian3" style="font-size: 20upx;width: 100upx;" />]
					</view>
					<view class="styles"><text>1张1.8米大床</text>|<text>20-25cm</text>|<text>2人入住</text></view>

					<view class="styles"><text>无早餐</text>|<text>不可取消</text></view>
					<view class="smarts">
						<view class="yuan">礼</view>
						<view class="xiaoword">一次性洗漱用品/刮胡刀/矿泉水两瓶</view>
					</view>
					<view style="overflow: hidden;">
						<view class="xiangm">
							<view>本店销量N0.1</view>
							<view>
								<image mode="widthFix" class="ruzhu" src="/static/ruzhu.png"></image>
								住就送·73元券包
							</view>
							<view>确认较快</view>
						</view>
					</view>
					<view class="jiage">
						<image class="jiageimg" mode="widthFix" src="/static/jiage.png"></image>
						<view class="jiageneirong floatleftr">
							<view class="transfomtrs"><text style="float:left">￥</text>
								<input class="lanborder" v-model="item.yuanprice"
									style="font-size: 20upx;width: 100upx;float:left;width: 70upx;" />
							</view>
							<view class="transfomtrs"><text style="float:left">￥</text></view>
							<view><input class="lanborder" v-model="item.price" style="font-size: 
									30upx;width: 100upx;float:left;width: 70upx;" /></view>
						</view>
					</view>
					<view class="boxs">
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="waterMarker"></view> -->
		<view class="flexss">
			<button class="buttons" v-if="isshow" @click.stop="addHotel">添加酒店</button>
			<button class="saves" v-if="isshow" @click.stop="saveData">保存</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				startday: "今日",
				endday: "明日",
				bgImage: '',
				list: [],
				start: { time1: "08", time2: "12" },
				end: { time1: "09", time2: "15" },
				yue: "08",
				renqi: "麓谷高新区经济人气榜第2名",
				adress2: "高新开发区、麓谷·高宁路",
				adress: "距您驾车 5.3公里·距和馨园地铁站步行 300米",
				kaiye: "2025年开业",
				names: "酒店名称"
			},
			isshow: false,
			title: 'Hello'
		}
	},
	onLoad() {
		this.loadData();
	},
	methods: {
		godetail(item) {
			uni.navigateTo({
				url: '/pages/detail/details?items=' + JSON.stringify(item),
				success: function (res) {
					// 跳转成功回调
				},
				fail: function (err) {
					// 跳转失败回调
				}
			})
		},
		handleLongPress() {
			this.isshow = true
		},
		// 加载本地数据
		loadData() {
			const savedData = uni.getStorageSync('hotelData');
			if (savedData) {
				this.form = JSON.parse(savedData);
			} else {
				// 默认数据
				this.form.list = [{
					name: "丽致影音大床房",
					start: { time1: "08", time2: "12" },
					end: { time1: "09", time2: "15" },
					tiaojian1: "免费洗衣",
					tiaojian2: "可开发票",
					tiaojian3: "冰箱",
					yuanprice: "50",
					price: "270",
					image: 'https://uimg.huixiaoer.net/86196272/b6d8196a274964bbdfb8aaddeafdfdac.jpg'
				}];
			}
		},
		// 保存数据到本地
		saveData() {
			uni.setStorageSync('hotelData', JSON.stringify(this.form));
			this.isshow = false;
			uni.showToast({
				title: '保存成功',
				icon: 'success'
			});
		},
		// 切换编辑模式
		toggleEdit() {
			this.isshow = !this.isshow;
		},
		// 模拟上传背景图片
		editimg() {
			if (!this.isshow) return;

			uni.chooseImage({
				count: 1,
				success: (res) => {
					// 实际项目中这里会上传到服务器并返回URL
					// 这里模拟上传成功，直接使用本地临时路径
					this.form.bgImage = res.tempFilePaths[0];
				}
			});
		},
		// 模拟上传酒店图片
		addtu(index) {
			uni.chooseImage({
				count: 1,
				success: (res) => {
					// 实际项目中这里会上传到服务器并返回URL
					// 这里模拟上传成功，直接使用本地临时路径
					this.$set(this.form.list[index], 'image', res.tempFilePaths[0]);
				}
			});
		},
		// 添加酒店
		addHotel() {
			this.form.list.push({
				name: "新酒店房间",
				tiaojian1: "条件1",
				tiaojian2: "条件2",
				tiaojian3: "条件3",
				yuanprice: "100",
				price: "300",
				image: ''
			});
		},
		// 删除酒店
		removeHotel(index) {
			uni.showModal({
				title: '提示',
				content: '确定要删除这个酒店吗？',
				success: (res) => {
					if (res.confirm) {
						this.form.list.splice(index, 1);
					}
				}
			});
		},
		// 返回
		back() {
			uni.navigateBack();
		}
	}
}
</script>

<style scopex>
.waterMarker {
	position: fixed;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	z-index: 999999999;
	pointer-events: none;
	opacity: 0.5;
	background: url("/static/watermarker.svg");
}

.jiant {
	width: 13upx;
	margin-left: 5upx;
	transform: translateY(3upx);
}

.wenyiwen {
	position: fixed;
	width: 50upx;
	bottom: 250upx;
	left: 20upx;
	z-index: 99;
}

.addtu {
	border: solid 1upx red;
	background: rgba(0, 0, 0, 0.5)
}

.yuanprice>input {
	float: left;
}

.jiageimg {
	width: 220upx;
	float: right;
}

.jiage {
	overflow: hidden;
	margin-top: 50upx;
	position: relative;
}

.jiageneirong {
	position: absolute;
	right: 60upx;
	top: 0;
	display: flex;
	justify-content: center;
	justify-items: center;
}

.jiageneirong>view:nth-child(1) {
	font-size: 20upx;
	line-height: 20upx;
	color: #6a6a6a;
	font-weight: bold;
	text-decoration: line-through;
}

.transfomtrs {

	transform: translateY(7upx);
}

.jiageneirong>view:nth-child(2) {
	font-size: 20upx;
	line-height: 20upx;
	font-weight: bold;
	color: #e02020;
	margin-left: 5upx;
}

.jiageneirong>view:nth-child(3) {
	font-size: 28upx;
	line-height: 28upx;
	font-weight: bold;
	color: #e02020;
}

.ruzhu {
	width: 30upx;
}

.goodtitle {
	font-weight: bold;
}

.goodtitles {
	overflow: hidden;
}

.goodtitles>input {
	float: left;
}

.goodtitles>view {
	float: left;
}

.goodtitles>image {
	float: left;
}

.saves {



	padding: 5upx;
	font-size: 20upx;
	margin-right: 10upx;
	border-radius: 23upx;
	background: rgb(0, 64, 153);
	color: white;
	width: 200upx;
	text-align: center;
	margin: 0 auto;
	margin-top: 50upx;
}

.boxxx {
	width: 90%;
	margin: 0 auto;
}

.inputbox {
	font-size: 30upx;
	border: solid 1upx blue;
}

.input {
	width: auto;
	display: inline-block;
}

.buttons {

	padding: 5upx;
	font-size: 20upx;
	margin-right: 10upx;
	border-radius: 23upx;
	border: solid 1upx rgb(0, 64, 153);
	color: rgb(0, 64, 153);
	width: 200upx;
	text-align: center;
	margin: 0 auto;
	margin-top: 50upx;
}

.boxs {
	clear: both;
	margin-top: 20upx;
}

.tixings {
	padding: 5upx;
	font-size: 20upx;
	margin-right: 10upx;
	border-radius: 23upx;
	border: solid 1upx rgb(0, 64, 153);
	color: rgb(0, 64, 153);
	width: 100upx;
	text-align: center;
}

.xiangm {
	display: flex;
	justify-content: center;
	justify-items: center;
	float: left;
	color: rgb(138, 138, 138);
	margin-top: 20upx;
}

.xiangm>view {
	padding: 5upx;
	font-size: 20upx;
	margin-right: 10upx;
	border-radius: 8upx;
	/* border: solid 1upx rgb(138, 138, 138); */
}

.xiangm>view:nth-child(1) {
	background: rgb(255, 237, 222);
	color: #b07150;
	border: solid 1upx rgb(255, 237, 222);
}

.xiangm>view:nth-child(2) {
	display: flex;
	justify-content: center;
	justify-items: center;
	background: white;
	color: #b97c41;
	border: solid 1upx rgb(255, 237, 222);
}

.xiangm>view:nth-child(3) {
	color: #959595;
	border: solid 1upx rgb(204, 204, 204);
}

.xiangm>view:nth-child(2) image {
	margin-right: 5upx;
}

.smarts {
	overflow: hidden;
	margin-top: 10upx
}

.rightword {
	padding-left: 20upx;
}

.lists {
	background: white;
	padding: 20upx;
	padding-bottom: 10upx;
	box-sizing: border-box;
	width: 96.2%;
	margin: 0 auto;
	border-radius: 20upx;
	overflow: hidden;
	display: flex;
	position: relative;
	justify-content: center;
	margin-bottom: 15upx;
}

.shanchu {
	position: absolute;
	left: 0;
	bottom: 0;
	color: white;
	background: red;
	padding: 10upx;
}

.goodsbb {
	width: 180upx;
	float: left;
	height: 250upx;
	border-radius: 15upx;
	position: relative;
}

.addtu {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.goods {
	width: 100%;
	border-radius: 15upx;
	height: 100%;
	background-size: cover;
	background-position: center;
}

.xing {
	width: 30upx;
	transform: translateY(5upx);
}

.yuan {
	width: 30upx;
	height: 30upx;
	border-radius: 50%;
	background: #003e96;
	color: white;
	font-size: 20upx;
	line-height: 30upx;
	text-align: center;
	float: left;
}

.xiaoword {
	/* color: rgb(138, 138, 138); */
	font-size: 20upx;
	float: left;
}

.styles {
	/* color: rgb(138, 138, 138); */
}

.wan {
	width: 90upx;
	float: left;
	margin: 0 10upx;
}

.riqi {
	margin-top: 490upx;
	margin-left: 20upx;
	font-size: 30upx;
}

.riqi>view:nth-child(1) {
	float: left;
}

.riqi>view:nth-child(2) {
	float: left;
}

.riqi>view {
	float: left;
	display: flex;
	justify-content: center;
}

.dizhi {
	width: 340upx;
	float: right;
	margin-top: 140upx;
	margin-right: 100upx;
	font-size: 24upx;
	color: rgb(27, 27, 27);
}

.dizhi2 {

	width: 340upx;
	float: right;
	margin-top: 5upx;
	margin-right: 100upx;
	font-size: 24upx;
	color: rgb(138, 138, 138);
}

.tian {
	color: rgb(17, 17, 17) !important;
	font-size: 22upx;
	line-height: 22upx;
	float: left;
	transform: translateY(15upx);
	margin-left: 2upx;
}

.huanhuang {
	width: 40upx;
	margin-left: 10upx;
	margin-top: 10upx;
}

.xinxi2 {
	margin-top: 8upx;
}

.kaye {
	background: rgb(244, 244, 244);
	float: left;
	font-size: 20upx;
	color: rgb(17, 17, 17);
	padding: 10upx;
	border-radius: 10upx;
	display: grid;
}

.kaye text {
	font-size: 20upx;
}

.kayeinput {
	font-size: 20upx;
}

.mingci {
	background: rgb(255, 237, 222);
	float: left;
	font-size: 20upx;
	color: rgb(145, 66, 24);
	padding: 10upx;
	margin-left: 20upx;
	border-radius: 10upx;
	justify-content: center;
	justify-items: center;
}

.xinxi {
	padding: 15upx;
	width: 100%;
}

.xinxi .names {
	font-size: 35upx;
	font-weight: bold;
}

.lanborder {
	border: solid 1px rgb(0, 102, 255);
	color: white;
	background: rgba(34, 34, 34, 0.6);
}

.xinxi .fonts {
	font-size: 35upx;
	font-weight: bold;

}

.overs {
	overflow: hidden;
	padding: 20upx;
}

.neiimg {
	width: 100%;
	display: block;
}

.content {
	background: rgb(244, 245, 249);
	min-height: 100vh;
}

.neirong {
	margin-top: -80upx;
	width: 100%;
	position: relative;
}

.xinxi {
	top: 0;
	padding-top: 55upx;
	box-sizing: border-box;
	left: 0;
	position: absolute;
}

.imglieft {
	float: left;
}

.rights {
	float: right;
	display: flex;
}

.rights .imgs {
	float: left;
	margin: 0 10upx;
	margin-top: 130upx;
}

.bgss {
	width: 100%;
	height: 450upx;
	background-size: cover;

	background-position: center;
}

.imgs {
	width: 50upx;
	height: 50upx;
	background: rgba(0, 0, 0, 0.58);
	border-radius: 50%;
	padding: 10upx;
	box-sizing: border-box;
	margin-top: 130upx;
	margin-left: 20upx;
}

.flexss {
	width: 70%;
	margin: 0 auto;
	padding-bottom: 200upx;
	display: flex;
	justify-content: center;
	justify-items: center;
}
</style>
